<pw:html>
    <pw:head>
        <title>SISCO - Procesando venta</title>

        <pw:component name="pw_include_view" data-show="true" data-src="head_scripts.html"></pw:component>
        
        <style>
            html,body { height: 100% }
            body {
                background: url('assets/img/ventas-wallpaper.jpg') center top no-repeat;
                color: #ddd;
                padding-top:51px;
                -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
                -moz-box-sizing: border-box;    /* Firefox, other Gecko */
                box-sizing: border-box;         /* Opera/IE 8+ */
            }
            .venta-detalle {
                background-color: #000;
                overflow-y: scroll;
            }
            .venta-detalle p {
                font-size: 16px;
                margin: 10px 0 0 10px;
            }
            .venta-total {
                background-color: #000;
                color: #fff;
                font-size: 20px;
                font-weight: bold;
                padding: 20px 0 20px 0;
            }
            .venta-nueva {
                background-color: #000;
            }
            .fill-height { min-height: 100%; height: 100% }
            
            #form-agregar {
                text-align: center;
            }
            #form-agregar input[type=text], .input-append input {
                border: 3px solid #fff;
                -webkit-box-shadow: 
                    inset 0 0 8px  rgba(0,0,0,0.4),
                    0 0 16px rgba(0,0,0,0.1); 
                -moz-box-shadow: 
                    inset 0 0 8px  rgba(0,0,0,0.4),
                    0 0 16px rgba(0,0,0,0.1); 
                box-shadow: 
                    inset 0 0 8px  rgba(0,0,0,0.4),
                    0 0 16px rgba(0,0,0,0.1); 
                padding: 5px;
                background: rgba(210,210,210,1);
                margin: 0 0 10px 0;
                font-size: 16px;
            }
            #form-agregar .input-append .add-on {
                padding: 6px;
                background: rgba(255,255,255,1);
                border: 1px solid #fff;
                font-size: 16px;
            }
            .item {
                border-left: 3px solid #4F5888;
                margin-left: 10px;
                background-color: #292C70;
            }
            .item .ean13 {
                margin: 0 5px 0 5px;
            }
            .item .precio_t {
                margin: 0 5px 0 5px;
                font-weight: bold;
            }
            .item .eliminar a {
                background-color: #B90707;
                margin-left: 30px;
                text-decoration: none;
                color: #fff;
            }
        </style>
        
    </pw:head>

    <pw:body>

        <pw:component name="pw_include_view" data-show="true" data-src="header.html"></pw:component>

        <div class="container fill-height">                
            
                <pw:component name="pw_div" data-show="true" data-class="row fill-height" data-id="">
                    <pw:container>
                        
                        <div class="span7 venta-detalle fill-height">
                            <p>Iniciada venta nº {$venta->id}</p>
                        </div>
                        <div class="span5 venta-total">
                        	<p style="text-align:center">TOTAL<br />$ <span id="total">0</span></p>
                        </div>
                        <div class="span5 venta-nueva">
                            <form id="form-agregar">
                                <input id="venta" name="venta" type="hidden" value="{$venta->id}" />
                                <input id="producto" name="producto" type="hidden" value="" />
                                <input id="oferta" name="oferta" type="hidden" value="" />
                                <input id="precio_unitario" name="precio_unitario" type="hidden" value="" />
                                
                                <input id="descripcion" name="descripcion" type="text" class="span5" disabled="disabled" />
                                <input id="precio_show" name="precio_show" type="text" class="span5" disabled="disabled" />

                                <label for="codigo-producto">Código</label>
                                <input id="codigo-producto" name="codigo-producto" type="text" class="span4" />
                            
                                <label for="cantidad">Cantidad</label>
                                <div class="input-append">
                                    <input class="span3" id="cantidad" name="cantidad" type="number" step="any" value="1">
                                    <span class="add-on" style="color:#000" id="cantidad-add-on"></span>
                                </div>
                                <br />
                                <input id="btn-agregar" class="btn btn-primary" value="Agregar" type="submit" disabled="disabled" />
                            </form>
                        </div>

                    </pw:container>
                </pw:component> <!-- .row -->

        </div><!-- .container -->

        <pw:component name="pw_include_view" data-show="true" data-src="footer_scripts.html"></pw:component>
        
        <script>
            
/*
			$(document).ready(function() {
                window.total = 0;
            });
*/
            
            function desactivarAgregado() {
                jQuery('#btn-agregar').attr('disabled','disabled');    
            }
            
            function activarAgregado() {
                desactivarAgregado();
                if (
                    (jQuery('#cantidad').val() > 0) &&
                    (jQuery('#descripcion').val() != 'ERROR') && (jQuery('#descripcion').val() != '')
                   )
                {
	                jQuery('#btn-agregar').removeAttr('disabled');
                }
            }
            
            function cleanForm() {
                jQuery('#producto').val('');
                jQuery('#descripcion').val('');
                jQuery('#precio_unitario').val('');
                jQuery('#oferta').val('');
                jQuery('#precio_show').val('');
                jQuery('#codigo-producto').val('');
                jQuery('#cantidad').val('1');
                jQuery('#cantidad-add-on').html('');
                jQuery('#codigo-producto').removeAttr('disabled');
                jQuery('#cantidad').removeAttr('disabled');
                jQuery('#codigo-producto').focus();
            }
            
            jQuery('#cantidad').on('change',function(e) {
                activarAgregado();
            });
            
            // Buscar código de producto ingresado
            jQuery('#codigo-producto').on('change',function(e) {
                desactivarAgregado();   
                jQuery.ajax({
                    url: 'productos/detalle/'+jQuery('#codigo-producto').val(),
                    type: 'GET',
                    dataType: 'JSON',
                    beforeSend: function(data) {
                        jQuery('#descripcion').val('Espere por favor...');
                        jQuery('#precio_show').val('Calculando...');
                    },
                    success: function(data){
                        if (data.id) {
                            jQuery('#producto').val(data.id);
                            jQuery('#descripcion').val(data.descripcion);
                            jQuery('#precio_unitario').val(data.precio_unitario);
                            jQuery('#oferta').val(data.oferta_id);
                            if (data.descuento > 0) {
                                jQuery('#precio_show').val('$ '+data.precio+'  (-'+data.descuento+'%)');
                            }
                            else
                                jQuery('#precio_show').val('$ '+data.precio);
                            jQuery('#cantidad-add-on').html(data.medida);
                            if (data.medida == 'u') { jQuery('#cantidad').attr('step','1'); }
                            else { jQuery('#cantidad').attr('step','0.001'); }
                            activarAgregado();
                        }
                        else {
                            jQuery('#descripcion').val('ERROR');
                        }
                    },
                    error: function(a,b,c){
                        alert('ERROR');
                    }
                });
            });
            
            // Agregar producto
            jQuery('#form-agregar').on('submit',function(event) {
                event.preventDefault();
                event.stopPropagation();
                desactivarAgregado();
                
                var form_data = jQuery('#form-agregar').serialize();
             
                jQuery.ajax({
                    url			: 'detalles_ventas/create/',
                    type		: 'POST',
                    data		: form_data,
                    cache		: false,
                    dataType	: 'JSON',
                    beforeSend	: function(data) {
                        jQuery('#codigo-producto').attr('disabled','disabled');
                        jQuery('#cantidad').attr('disabled','disabled');
                        desactivarAgregado();
                    },
                    success		: function(data){
						jQuery('.venta-detalle').append(data.response);
                        jQuery('#total').html(data.sumatoria);
                        cleanForm();
                    },
                    error		: function(a,b,c){
                        alert('Error agregando el producto');
                        cleanForm();
                    }
                    
                });
            });
            
            // Eliminar item
            jQuery('.venta-detalle').on('click','.eliminar',function(event) {
                event.preventDefault();
                event.stopPropagation();

                var div = jQuery(event.target).closest("div");
               
                jQuery.ajax({
                    url			: event.target.href,
                    type		: 'GET',
                    dataType	: 'JSON',
                    beforeSend	: function(data) {
                        div.fadeTo(300,0.8);
                    },
                    success		: function(data){
						div.fadeOut(function() {
                            jQuery(this).remove();
                        });
                        jQuery('#total').html(data.sumatoria);
                    },
                    error		: function(a,b,c){
                        alert('Error agregando el producto');
                    }
                    
                });

            });
            
            
        </script>
        
    </pw:body>
</pw:html>